<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品详情页</title>
    <!--引入样式-->
    <link rel="stylesheet" href="../css/normalize.css">
    <link rel="stylesheet" href="../css/common.css">

    <!-- 引入轮播插件的样式 -->
    <link rel="stylesheet" href="../lib/plugins/slider/css/slider.css">
     <!-- 引入放大镜插件的样式  -->
    <link rel="stylesheet" href="../lib/magnifier/magnifier.css">
    <!--引入当前文件样式-->
    <link rel="stylesheet" href="../css/producedetails.css">
</head>

<body>
    <!--头部head-->
    <section id="head" class="head">
        <div id="headTop" class="head-top">
            <div class="head-top-text container">
                <img src="../imgs/logo.jpg" alt="">
                <span>legochina.cn</span>
                <span class="fr">欢迎光临乐购，请 <a href="">登陆</a>\<a href="">注册</a></span>
            </div>
        </div>
        <div class="head-bom container clearfix">
           
            <div class="fr clearfix">
                <input type="text" placeholder="创意文具"><button></button>
                <p class="cart"><span>&emsp;购物车</span></p>
                <p>我的订单</p>
            </div>
            <ul class="nav fr">
                <li>图书</li>
                <li>电子书</li>
                <li>原创文学</li>
                <li>服装</li>
                <li>运动户外</li>
                <li>孕婴童</li>
                <li>家居</li>
                <li>创意文具</li>
                <li>地方特产</li>
                <li>海外购</li>
                <li>电器城</li>
            </ul>
        </div>
    </section>
    <!--产品详情-->
   <section class="magnifier-area container clearfix mt40 ">
       <!-- 左边放大镜区域-->
        <div class="magnifier-left fl ">
            <div class="magnifier my-magnifier" id="magnifier1">
                  <div class="magnifier-container">
                    <div class="images-cover"></div>
                    <!--当前图片显示容器-->
                    <div class="move-view"></div>
                    <!--跟随鼠标移动的盒子-->
                </div>
                <div class="magnifier-assembly">
                    <div class="magnifier-btn">
                        <span class="magnifier-btn-left">&lt;</span>
                        <span class="magnifier-btn-right">&gt;</span>
                    </div>
                    <!--按钮组-->
                    <div class="magnifier-line">
                        <ul class="clearfix animation03">
                            <li>
                                <div class="small-img">
                                    <img src="../imgs/l.jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="../imgs/a.jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="../imgs/k.jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="../imgs/j.jpg" />
                                </div>
                            </li>
                            <li>
                                <div class="small-img">
                                    <img src="../imgs/h.jpg" />
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!--缩略图-->
                </div>
                <div class="magnifier-view"></div>
            </div>
        </div>
       <!-- 右边详情区域--> 
        <div class="magnifier-right fr ">
           <div class="magnifier-content">
            <div class="magnifiterright-text">
                <h3 class="bookname">她和他</h3> 
                 <p class="booksynopsis">《偷影子的人》作者马克·李维重磅新作，法国连续60周在榜，销量突破120万册</p> 
                  <span class="author">[法] 马克·李维 著；杨亦雨 译</span>
                  <div class="price">
                    <p>乐 购 价： <span class="colorf80e0e fz18">￥26.20</span>   [6.9折]  <span class="line-through"> [定价：￥38]  </span> (降价通知) </p>
                    <p>促销信息：<span class="colorf80e0e">满减 每满150.00元，可减50.00元现金</span>    详情 >></p>
                    <p>领 券： <span class="coupon">100-6</span>  <span class="coupon">100-6</span></p>
                </div>  
             </div>
             <div class="magnifiterright-text peg">
                <h3 class="bookname">她和他</h3> 
                <p class="booksynopsis">《偷影子的人》作者马克·李维重磅新作，法国连续60周在榜，销量突破120万册</p> 
                 <span class="author">[法] 马克·李维 著；杨亦雨 译</span>
                 <div class="price">
                    <p>乐 购 价： <span class="colorf80e0e fz18">￥26.20</span>   [6.9折]  <span class="line-through"> [定价：￥38]  </span> (降价通知) </p>
                    <p>促销信息：<span class="colorf80e0e">满减 每满150.00元，可减50.00元现金</span>    详情 >></p>
                    <p>领 券： <span class="coupon">100-6</span>  <span class="coupon">100-6</span></p>
                </div>  
             </div>
             
           </div>
            <p class="type">
                种类选择：  <span class="edition">平装版</span> <span class="edition border">精装版</span>
            </p>
            <div class="piece ">
               <p></p> <button class="add">+</button> <span  class="amount">1</span><button class="reduce">-</button>
                <span class="join">加入购物车</span>
            </div>
        </div>
   </section>
   <!--人气单品-->
   <section class="popular container mt40">
    <div class="common-title clearfix">
        <h2 class="colorf60 title fs28 fl">人气单品</h2>
    </div>
    <div class="popular-list">
        <ul class="clearfix">
            <li class="fl"> <img src="../imgs/i.jpg" alt="">
                <div class="item-text"> 
                    <p class="introduce">白夜行 东野上吾</p>
                    <p class="sale">中国邮电出版社</p>
                    <span class="price1">￥：40</span><span class="price2">￥：79</span>
                </div>
            
            </li>
            <li class="fl"> <img src="../imgs/i.jpg" alt="">
                <div class="item-text"> 
                    <p class="introduce">白夜行 东野上吾</p>
                    <p class="sale">中国邮电出版社</p>
                    <span class="price1">￥：40</span><span class="price2">￥：79</span>
                </div>
            
            </li>
            <li class="fl"> <img src="../imgs/i.jpg" alt="">
                <div class="item-text"> 
                    <p class="introduce">白夜行 东野上吾</p>
                    <p class="sale">中国邮电出版社</p>
                    <span class="price1">￥：40</span><span class="price2">￥：79</span>
                </div>
            
            </li>
            <li class="fl"> <img src="../imgs/i.jpg" alt="">
                <div class="item-text"> 
                    <p class="introduce">白夜行 东野上吾</p>
                    <p class="sale">中国邮电出版社</p>
                    <span class="price1">￥：40</span><span class="price2">￥：79</span>
                </div>
            
            </li>
            <li class="fl"> <img src="../imgs/i.jpg" alt="">
                <div class="item-text"> 
                    <p class="introduce">白夜行 东野上吾</p>
                    <p class="sale">中国邮电出版社</p>
                    <span class="price1">￥：40</span><span class="price2">￥：79</span>
                </div>
            
            </li>
           
        </ul>
    </div>
   </section>
    <!--评论-->
    <section class="comment mt40 container clearfix">
         <!--左边-->
         <div class="comment-left fl">
             <h2 class="title">看了又看</h2>
             <ul>
                <li class="commentleft-item"> <img src="../imgs/i.jpg" alt="">
                    <div class="item-text"> 
                        <p class="introduce">白夜行 东野上吾</p>
                        <p class="sale">中国邮电出版社</p>
                        <span class="price1">￥：40</span><span class="price2">￥：79</span>
                    </div>
                
                </li>
                <li class="commentleft-item"> <img src="../imgs/i.jpg" alt="">
                    <div class="item-text"> 
                        <p class="introduce">白夜行 东野上吾</p>
                        <p class="sale">中国邮电出版社</p>
                        <span class="price1">￥：40</span><span class="price2">￥：79</span>
                    </div>
                
                </li>
                <li class="commentleft-item"> <img src="../imgs/i.jpg" alt="">
                    <div class="item-text"> 
                        <p class="introduce">白夜行 东野上吾</p>
                        <p class="sale">中国邮电出版社</p>
                        <span class="price1">￥：40</span><span class="price2">￥：79</span>
                    </div>
                
                </li>
                <li class="commentleft-item"> <img src="../imgs/i.jpg" alt="">
                    <div class="item-text"> 
                        <p class="introduce">白夜行 东野上吾</p>
                        <p class="sale">中国邮电出版社</p>
                        <span class="price1">￥：40</span><span class="price2">￥：79</span>
                    </div>
                
                </li>
                <li class="commentleft-item"> <img src="../imgs/i.jpg" alt="">
                    <div class="item-text"> 
                        <p class="introduce">白夜行 东野上吾</p>
                        <p class="sale">中国邮电出版社</p>
                        <span class="price1">￥：40</span><span class="price2">￥：79</span>
                    </div>
                
                </li>
                <li class="commentleft-item"> <img src="../imgs/i.jpg" alt="">
                    <div class="item-text"> 
                        <p class="introduce">白夜行 东野上吾</p>
                        <p class="sale">中国邮电出版社</p>
                        <span class="price1">￥：40</span><span class="price2">￥：79</span>
                    </div>
                
                </li>
                <li class="commentleft-item"> <img src="../imgs/i.jpg" alt="">
                    <div class="item-text"> 
                        <p class="introduce">白夜行 东野上吾</p>
                        <p class="sale">中国邮电出版社</p>
                        <span class="price1">￥：40</span><span class="price2">￥：79</span>
                    </div>
                
                </li>
                <li class="commentleft-item"> <img src="../imgs/i.jpg" alt="">
                    <div class="item-text"> 
                        <p class="introduce">白夜行 东野上吾</p>
                        <p class="sale">中国邮电出版社</p>
                        <span class="price1">￥：40</span><span class="price2">￥：79</span>
                    </div>
                
                </li>
                <li class="commentleft-item"> <img src="../imgs/i.jpg" alt="">
                    <div class="item-text"> 
                        <p class="introduce">白夜行 东野上吾</p>
                        <p class="sale">中国邮电出版社</p>
                        <span class="price1">￥：40</span><span class="price2">￥：79</span>
                    </div>
                
                </li>
                <li class="commentleft-item"> <img src="../imgs/i.jpg" alt="">
                    <div class="item-text"> 
                        <p class="introduce">白夜行 东野上吾</p>
                        <p class="sale">中国邮电出版社</p>
                        <span class="price1">￥：40</span><span class="price2">￥：79</span>
                    </div>
                
                </li>
             </ul>
         </div>
          <!--右边-->
          <div class="comment-right fr">
            <div class="common-title clearfix">
                <ul class="clearfix">
                    <li class="table-title fs24 fl">商品介绍</li>
                    <li class="table-title active fs24 fl">评价(9999)</li>

                </ul>
            </div>
              <div class="content">
                  <div class="content-item">
                     <img src="../imgs/producintroduce.jpg" alt=""> 
                  </div>
                  <div class="content-item current clearfix">
                     <div class="comment-content">
                        <div class="item-left fl">
                            <p class="percent-con">
                                98 <span>%</span>
                            </p>
                            <span class="percent-title">好评度</span>
                          </div>
                          <div class="item-center fl">
                              <ul>
                                  <li><span>好评(98%):</span><img src="../imgs/percent1.png" alt=""> </li>
                                  <li><span>中评(2%):</span> <img src="../imgs/percent2.png" alt=""> </li>
                                  <li><span>差评(0%):</span>  <img src="../imgs/percent3.png" alt=""> </li>
                              </ul>
                          </div>
                          <div class="item-right fr">
                              <p>1.洲**子 &emsp;&emsp;&emsp;+10 &emsp;&emsp;&emsp; 2.洲**子&emsp;&emsp;&emsp; +0 </p>
                              <p>3.洲**子 &emsp;&emsp;&emsp;+10 &emsp;&emsp;&emsp; 4.洲**子&emsp;&emsp;&emsp; +0 </p>
                          </div>
                     </div>
                     <ul class="evaluate">
                        <li class="evaluate-list clearfix">
                            <div class="evaluate-left fl">
                                <p>★★★★★★</p>
                                <p>下单后5天评论</p>
                                <p>2016-08-11</p>
                            </div>
                            <div class="evaluate-center fl">
                                <p>书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力</p>
                            </div>
                            <div class="evaluate-right fl">
                                <p><img src="" alt="">洲**子</p>
                                <span>金牌会员</span>
                                <p>来自iPhone客户端</p>
                            </div>
                        </li>
                        <li class="evaluate-list clearfix">
                            <div class="evaluate-left fl">
                                <p>★★★★★★</p>
                                <p>下单后5天评论</p>
                                <p>2016-08-11</p>
                            </div>
                            <div class="evaluate-center fl">
                                <p>书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力</p>
                            </div>
                            <div class="evaluate-right fl">
                                <p><img src="" alt="">洲**子</p>
                                <span>金牌会员</span>
                                <p>来自iPhone客户端</p>
                            </div>
                        </li>
                        <li class="evaluate-list clearfix">
                            <div class="evaluate-left fl">
                                <p>★★★★★★</p>
                                <p>下单后5天评论</p>
                                <p>2016-08-11</p>
                            </div>
                            <div class="evaluate-center fl">
                                <p>书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力</p>
                            </div>
                            <div class="evaluate-right fl">
                                <p><img src="" alt="">洲**子</p>
                                <span>金牌会员</span>
                                <p>来自iPhone客户端</p>
                            </div>
                        </li>
                        <li class="evaluate-list clearfix">
                            <div class="evaluate-left fl">
                                <p>★★★★★★</p>
                                <p>下单后5天评论</p>
                                <p>2016-08-11</p>
                            </div>
                            <div class="evaluate-center fl">
                                <p>书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力</p>
                            </div>
                            <div class="evaluate-right fl">
                                <p><img src="" alt="">洲**子</p>
                                <span>金牌会员</span>
                                <p>来自iPhone客户端</p>
                            </div>
                        </li>
                        <li class="evaluate-list clearfix">
                            <div class="evaluate-left fl">
                                <p>★★★★★★</p>
                                <p>下单后5天评论</p>
                                <p>2016-08-11</p>
                            </div>
                            <div class="evaluate-center fl">
                                <p>书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力</p>
                            </div>
                            <div class="evaluate-right fl">
                                <p><img src="" alt="">洲**子</p>
                                <span>金牌会员</span>
                                <p>来自iPhone客户端</p>
                            </div>
                        </li>
                        <li class="evaluate-list clearfix">
                            <div class="evaluate-left fl">
                                <p>★★★★★★</p>
                                <p>下单后5天评论</p>
                                <p>2016-08-11</p>
                            </div>
                            <div class="evaluate-center fl">
                                <p>书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力</p>
                            </div>
                            <div class="evaluate-right fl">
                                <p><img src="" alt="">洲**子</p>
                                <span>金牌会员</span>
                                <p>来自iPhone客户端</p>
                            </div>
                        </li>
                        <li class="evaluate-list clearfix">
                            <div class="evaluate-left fl">
                                <p>★★★★★★</p>
                                <p>下单后5天评论</p>
                                <p>2016-08-11</p>
                            </div>
                            <div class="evaluate-center fl">
                                <p>书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力</p>
                            </div>
                            <div class="evaluate-right fl">
                                <p><img src="" alt="">洲**子</p>
                                <span>金牌会员</span>
                                <p>来自iPhone客户端</p>
                            </div>
                        </li>
                        <li class="evaluate-list clearfix">
                            <div class="evaluate-left fl">
                                <p>★★★★★★</p>
                                <p>下单后5天评论</p>
                                <p>2016-08-11</p>
                            </div>
                            <div class="evaluate-center fl">
                                <p>书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力</p>
                            </div>
                            <div class="evaluate-right fl">
                                <p><img src="" alt="">洲**子</p>
                                <span>金牌会员</span>
                                <p>来自iPhone客户端</p>
                            </div>
                        </li>
                        <li class="evaluate-list clearfix">
                            <div class="evaluate-left fl">
                                <p>★★★★★★</p>
                                <p>下单后5天评论</p>
                                <p>2016-08-11</p>
                            </div>
                            <div class="evaluate-center fl">
                                <p>书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力</p>
                            </div>
                            <div class="evaluate-right fl">
                                <p><img src="" alt="">洲**子</p>
                                <span>金牌会员</span>
                                <p>来自iPhone客户端</p>
                            </div>
                        </li>
                        <li class="evaluate-list clearfix">
                            <div class="evaluate-left fl">
                                <p>★★★★★★</p>
                                <p>下单后5天评论</p>
                                <p>2016-08-11</p>
                            </div>
                            <div class="evaluate-center fl">
                                <p>书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力</p>
                            </div>
                            <div class="evaluate-right fl">
                                <p><img src="" alt="">洲**子</p>
                                <span>金牌会员</span>
                                <p>来自iPhone客户端</p>
                            </div>
                        </li>
                        <li class="evaluate-list clearfix">
                            <div class="evaluate-left fl">
                                <p>★★★★★★</p>
                                <p>下单后5天评论</p>
                                <p>2016-08-11</p>
                            </div>
                            <div class="evaluate-center fl">
                                <p>书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力</p>
                            </div>
                            <div class="evaluate-right fl">
                                <p><img src="" alt="">洲**子</p>
                                <span>金牌会员</span>
                                <p>来自iPhone客户端</p>
                            </div>
                        </li>
                        <li class="evaluate-list clearfix">
                            <div class="evaluate-left fl">
                                <p>★★★★★★</p>
                                <p>下单后5天评论</p>
                                <p>2016-08-11</p>
                            </div>
                            <div class="evaluate-center fl">
                                <p>书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力</p>
                            </div>
                            <div class="evaluate-right fl">
                                <p><img src="" alt="">洲**子</p>
                                <span>金牌会员</span>
                                <p>来自iPhone客户端</p>
                            </div>
                        </li>
                        <li class="evaluate-list clearfix">
                            <div class="evaluate-left fl">
                                <p>★★★★★★</p>
                                <p>下单后5天评论</p>
                                <p>2016-08-11</p>
                            </div>
                            <div class="evaluate-center fl">
                                <p>书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力</p>
                            </div>
                            <div class="evaluate-right fl">
                                <p><img src="" alt="">洲**子</p>
                                <span>金牌会员</span>
                                <p>来自iPhone客户端</p>
                            </div>
                        </li>
                        <li class="evaluate-list clearfix">
                            <div class="evaluate-left fl">
                                <p>★★★★★★</p>
                                <p>下单后5天评论</p>
                                <p>2016-08-11</p>
                            </div>
                            <div class="evaluate-center fl">
                                <p>书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力</p>
                            </div>
                            <div class="evaluate-right fl">
                                <p><img src="" alt="">洲**子</p>
                                <span>金牌会员</span>
                                <p>来自iPhone客户端</p>
                            </div>
                        </li>
                     </ul>
                  </div>

              </div>
          </div>
    </section>
    <!--页尾 footer-->
    <section id="footer" class="footer">
        <div class="footer-top">
            <ul class="after-service clearfix container">
                <li class="after-service-text fl">
                    <a href=""><img src="../imgs/222_11.png" alt=""></a>
                </li>
                <li class="after-service-text fl">
                    <a href=""><img src="../imgs/222_13(1).png" alt=""></a>
                </li>
                <li class="after-service-text fl">
                    <a href=""><img src="../imgs/222_15.png" alt=""></a>
                </li>
                <li class="after-service-text fl">
                    <a href=""><img src="../imgs/222_17.png" alt=""></a>
                </li>
            </ul>

        </div>
        <div class="footer-bom container clearfix">
            <ul>
                
                <li class="footer-bom-list fl">
                    <p class="footer-bom-nav">购物指南</p>
                    <a class="footer-bom-link" href="">购物流程</a><br>
                    <a class="footer-bom-link" href="">发票制度 </a><br>   
                    <a class="footer-bom-link" href="">账户管理</a><br>
                    <a class="footer-bom-link" href=""> 会员优惠</a>
                </li>
                
                <li class="footer-bom-list fl">
                    <p class="footer-bom-nav">支付方式</p>
                    <a class="footer-bom-link" href="">货到付款</a><br>
                    <a class="footer-bom-link" href="">网上支付</a><br>   
                    <a class="footer-bom-link" href="">礼品卡支付</a><br>
                    <a class="footer-bom-link" href="">银行转帐</a>
                </li>
                <li class="footer-bom-list fl">
                    <p class="footer-bom-nav">订单服务</p>
                    <a class="footer-bom-link" href="">订单配送查询</a><br>
                    <a class="footer-bom-link" href="">订单状态说明</a><br>   
                    <a class="footer-bom-link" href="">自助取消订单</a><br>
                    <a class="footer-bom-link" href="">自助修改订单</a>
                </li>
                <li class="footer-bom-list fl">
                    <p class="footer-bom-nav">退换货</p>
                    <a class="footer-bom-link" href="">退换货政策</a><br>
                    <a class="footer-bom-link" href="">自助申请退换货</a><br>   
                    <a class="footer-bom-link" href="">退换货进度查询</a><br>
                    <a class="footer-bom-link" href="">退款方式和时间</a>
                </li>
                <li class="footer-bom-list fl">
                    <p class="footer-bom-nav">"商家服务</p>
                    <a class="footer-bom-link" href="">商家中心</a><br>
                    <a class="footer-bom-link" href=""> 运营服务</a><br>   
                    <a class="footer-bom-link" href="">加入尾品汇</a>  
                </li>
               
                    
                
                

            </ul>
            <img class="fr" src="../imgs/logo_00.png" alt="">
        </div>
        <p class="footer-list  container">
            <a class="footer-link" href="">  公司简介  |</a>
            <a class="footer-link" href="">  Investor Relations  | </a>
            <a class="footer-link" href="">  网站联盟  |</a>
            <a class="footer-link" href="">  乐购招商  |</a>
            <a class="footer-link" href="">  机构销售  |</a>
            <a class="footer-link" href="">  手机乐购  |</a>
            <a class="footer-link" href="">  官方Blog   |</a>
            <a class="footer-link" href="">  热词搜索</a>
        </p>
        <p class="license">Copyright (C) 乐购网 2004-2016, All Rights Reserved</p>
    </section>
    <!--引入轮播插件  注意要先引入jQuery库-->
    <script src="../lib/plugins/slider/lib/jquery.min.js"></script>
    <script src="../lib/plugins/slider/lib/jquery.slidebox.js"></script>
     <!-- 放大镜插件 -->
     <script src="../lib/magnifier/magnifier.js"></script>
    <script src="../js/producedetails.js"></script>
</body>

</html>